<template>
    <div>
        <el-button type="primary" size="default" icon="el-icon-plus" :disabled="!category3Id"
            @click="changShowStatus()">添加spu</el-button>
        <el-table :data="spuPageList" border style="margin:20px 0;">
            <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
            <el-table-column label="SPU名称" prop="spuName"></el-table-column>
            <el-table-column label="SPU描述" prop="description"></el-table-column>
            <el-table-column label="操作">
                <template v-slot="{ row, $index }">
                    <el-button type="primary" size="mini" icon="el-icon-plus" title="添加sku" @click=""></el-button>
                    <el-button type="primary" size="mini" icon="el-icon-edit-outline" title="修改spu"
                        @click="changShowStatus(row)"></el-button>
                    <el-button type="info" size="mini" icon="el-icon-info" title="查看sku" @click=""></el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete" title="删除spu"
                        @click="delSpu(row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
            :page-sizes="[3, 5, 10]" :page-size="limit" layout="prev, pager, next,jumper,->,sizes,total" :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import spuApi from '@/api/spu'
import { Message } from 'element-ui';

export default {
    name: 'SpuList',
    data() {
        return {
            page: 1,
            limit: 5,
        }
    },
    methods: {
        ...mapActions('spu', ['getSpuPageList']),
        // 每页条数发生变化
        handleSizeChange(num) {
            this.limit = num
            // 重新请求数据
            this.getPageList()
        },
        // 当前页发生变化
        handleCurrentChange(num) {
            this.page = num
            this.getPageList()
        },
        // 请求列表数据
        getPageList() {
            this.getSpuPageList({ page: this.page, limit: this.limit, category3Id: this.category3Id })
        },
        // 点击添加spu或修改spu
        changShowStatus(row) {
            // 通知父元素展示spuForm
            this.$emit('changeStatus', 1, row)
        },
        // 删除某个spu
        async delSpu(row) {
            console.log(row);
            try {
                await spuApi.deleteOneSpu(row.id)
                Message.success('删除成功')
                this.getPageList()
            } catch (error) {
                console.log(error);
                Message.error('删除失败')
            }
        }
    },
    watch: {
        category3Id: {
            handler() {
                this.page = 1
                this.getPageList()
            },
            immediate: true

        }
    },
    computed: {
        ...mapState('category', ['category3Id']),
        ...mapState('spu', ['total', 'spuPageList'])
    }

}
</script>

<style lang="less" scoped></style>
